<script setup lang="jsx">
import api from '../../api'
import { getDepartment } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'
import EditNum from '@/components/Change/EditNum'
import aChange from '@/components/Change'
import BatchSku from './BatchSku'
import SimpleTable from '@/components/SimpleTable'
import aGoods from '@/components/Goods'
import ChangeDialog from '@/views/demand/sku/components/ChangeDialog'
import Cancel from '@/views/demand/sku/components/Cancel'
import XEUtils from 'xe-utils'

// 查询
const query = () => {
  tableRef?.value.query?.()
}

const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  options: { type: Object, default: () => ({}) },
  isLook: Boolean,
})

const emit = defineEmits(['update:modelValue'])
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const total = computed(() => ({ total_demand_amount: form.value.basic?.total_demand_amount || 0, total_demand_num: form.value.basic?.total_demand_num || 0 }))

// 批量操作
const goodsRef = ref()
const batchSkuRef = ref()
const tableRef = ref()
const editNumRef = ref()
const changeRef = ref()
const loadings = reactive({})
const handleBatch = (name) => {
  const selection = props.isLook ? tableRef.value.$table.getCheckboxRecords() : tableRef.value.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  const pds_ids = selection.map(d => d.pds_id)
  const showLoading = () => loadings[name] = true
  const closeLoading = () => loadings[name] = false
  const handle = {
    change: () => {
      changeRef?.value.open(selection)
    },
    skuCancel: () => {
      cancelRef?.value.open(pds_ids)
    },
  }
  handle[name]()
}

// 单行操作
const cancelRef = ref()
const changeDialogRef = ref()
const handleRow = (name, row, rowIndex) => {
  const { pds_id } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    change: () => {
      changeRef?.value.open([row])
    },
    adjust: () => {
      changeDialogRef?.value.open(row)
    },
    skuCancel: () => {
      cancelRef?.value.open([pds_id])
    },
    skuComplete: () => {
      showLoading()
      api.skuComplete({ pds_id, pd_id: form.value.basic.pd_id }).then(res => {
        ElMessage.success('操作成功')
        query()
      }).finally(closeLoading)
    },
    view: () => {
      if (row.abnormal_flag !== '是') return
      ElMessageBox({
        title: '查看异常详情',
        showCancelButton: true,
        showConfirmButton: false,
        cancelButtonText: '关闭',
        message: () => <div class='flex flex-col gap-2'>
          {
            row.abnormal_data.map((d, i) => <div>
              <VText title='异常单' value={d.abnormal_no}></VText>
              <VText title='异常单状态' value={d.abnormal_status_name}></VText>
            </div>)
          }
        </div>
      })
    }
  }
  handle[name]()
}

const saleChange = (da, { value }) => {
  getDepartment({ select_user_id: value }).then(res => {
    da.department_id = res.data.department_id
    da.department_name = res.data.department_name
  })
}

const batchRemove = () => {
  const selection = tableRef.value.getCheckboxRecords()
  form.value.sku = form.value.sku.filter(d => !selection.some(s => s.sku === d.sku))
}

const goodsChange = (val) => {
  const { sku } = form.value
  const checkeds = val.map(d => {
    d.sku_name = d.sku_cn_title
    d.demand_amount = 0
    d.plan = []
    if (!d.detail) {
      d.detail = [{ sale_id: '', department_id: '' }]
    }
    return d
  })
  form.value.sku.push(...checkeds)
}

watch(
  () => form.value.sku,
  (val) => {
    tableOptions.table = val
  }
)
// 列表配置
const tableOptions = reactive({
  showOverflow: true,
  size: 'small',
  crollY: { enabled: true, gt: 10 },
  rowConfig: { height: 120 },
  formConfig: {},
  proxyConfig: {
    ajax: {
      query: async () => {
        await 1
        return { data: form.value.sku, total: form.value.sku.length }
      }
    }
  },
  columns: [
    { visible: form.value.basic.demand_status === 9, type: 'checkbox', fixed: 'left', width: 40 },
    {
      title: '图片', width: 100, slots: {
        default: ({ row }) => <VImage src={row.main_img} size="80px"></VImage>
      }
    },
    {
      title: 'sku信息', width: 200, slots: {
        default: ({ row }) => <div>
          <VText title="需求ID" value={row.sku_no} />
          <VText title="sku" value={row.sku}>
            <span class='whitespace-nowrap'>{row.sku}</span>
            {row.is_new === 2 ? <el-tag type="success" effect="dark" class='mx-1'>新</el-tag> : ''}
            {row.is_special_purchase === 2 ? <el-tag type="danger" effect="dark">特</el-tag> : ''}
          </VText>
          <VText title="自定义sku" value={row.sku} />
          <VText title="产品状态" value={row.sku_status_name} />
          <VText title='是否退税' value={row.is_refund_tax_name} />
        </div>
      }
    },
    { title: '产品等级', field: 'sku_product_level_name', width: 80 },
    { title: '产品名称', field: 'sku_cn_title', width: 180, line: 3 },
    { title: '平台', field: 'platform_name', width: 140 },
    {
      title: '总数', width: props.isLook ? 150 : 180, slots: {
        header: 'total_demand_amount_header',
        default: 'total_demand_amount_default',
      }
    },
    {
      title: '国家', width: props.isLook ? 120 : 180, slots: {
        header: 'country_header',
        default: 'country_default',
      }
    },
    { title: '估算日销量', field: 'estimate_day_sale_num', width: 70 },
    {
      title: '目的仓', width: 120, slots: {
        header: 'warehouse_header',
        default: 'warehouse_default',
      }
    },
    {
      title: '组合sku', width: 80, slots: {
        default: 'combination_default',
      }
    },
    {
      title: '部门', width: 320, slots: {
        header: 'department_header',
        default: 'department_default',
      }
    },
    { title: '产品分类', field: 'attribute_name', width: 120, line: 3 },
    {
      title: '供应商信息', width: 120, slots: {
        default: ({ row }) => <div>
          <VText value={row.supplier_code} />
          <VText title="是否开票" value={row.is_invoice_name} />
          <VText title="地址" value={row.supplier_address} line="2" />
        </div>
      }
    },
    {
      title: '采购/开发', width: 120, slots: {
        default: ({ row }) => <div>
          <VText value={row.purchaser_name} />
          <VText value={row.developer_name} />
        </div>
      }
    },
    {
      title: '备料计划数据', width: 160, slots: {
        default: 'plan_no_default'
      }
    },
    {
      visible: props.isLook, title: '采购信息', width: 190, slots: {
        default: 'purchase_default'
      }
    },
    {
      visible: props.isLook, title: '采购暂停人员', width: 140, slots: {
        header: 'pause_user_header',
        default: 'pause_user_default',
      }
    },
    {
      visible: props.isLook, title: '采购驳回人员', width: 140, slots: {
        header: 'reject_user_header',
        default: 'reject_user_default',
      }
    },
    {
      visible: props.isLook, title: '头程发货信息', width: 160, slots: {
        default: 'deliver_no_default',
      }
    },
    {
      visible: props.isLook, title: '备注', width: 120, slots: {
        default: 'remark_default',
      }
    },
    {
      visible: props.isLook, title: '操作', width: 100, fixed: 'right', slots: {
        default: 'handle_default',
      }
    },
  ]
})

const skus = computed(() => form.value.sku?.map(d => d.sku) || [])

defineExpose({ handleBatch, query })
</script>

<template>
  <div v-if="isLook" class="h-full">
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form>
        <slot />
      </template>
      <template #total_demand_amount_header>
        <div><span v-if="!isLook" class="text-red-600">*</span> 总需求数量 (<span class="font-bold text-red-600">{{ total.total_demand_num }}</span>)</div>
        <div>总金额 (<span class="font-bold text-red-600">{{ total.total_demand_amount }}</span>)</div>
        采购未税价
      </template>
      <template #total_demand_amount_default="{ row, rowIndex }">
        <div class="flex flex-col gap-1 p-1">
          <template v-if="isLook">
            <VText :value="row.demand_num" />
          </template>

          <template v-else>
            <el-form-item :prop="['sku', rowIndex, 'demand_num']" label=""
              :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
              <el-input-number v-model="row.demand_num" controls-position="right" placeholder="总需求数量" :min="0" :step="1"
                :precision="0" class="w-full"
                @change="val => row.demand_amount = XEUtils.toFixed(row.purchase_price * (val || 0), 2)" />
            </el-form-item>
          </template>
          <VText :value="`${row.demand_amount} (CNY)`" />
          <VText :value="row.purchase_price" />
        </div>
      </template>
      <template #country_header>
        <div v-if="form.basic.demand_type === 2">ASIN</div>
        <span v-if="!isLook" class="text-red-600">*</span> 国家
        <div><span v-if="!isLook" class="text-red-600">*</span> 需求日期</div>
      </template>
      <template #country_default="{ row, rowIndex }">
        <div class="flex flex-col gap-1 p-1">
          <template v-if="isLook">
            <VText v-if="form.basic.demand_type === 2" :value="row.asin" />
            <VText :value="row.country_name" />
            <VText :value="row.demand_time" />
          </template>
          <template v-else>
            <el-form-item v-if="form.basic.demand_type === 2" class="mb-1">
              <el-input v-model="row.asin" placeholder="ASIN" class="w-full" />
            </el-form-item>
            <el-form-item :prop="['sku', rowIndex, 'country']" label=""
              :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
              <VSelect v-model="row.country" placeholder="国家" :options="options.country" select filterable clearable
                class="w-full" @change="row.destination_warehouse = ''" />
            </el-form-item>
            <el-form-item :prop="['sku', rowIndex, 'demand_time']" label=""
              :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
              <el-date-picker v-model="row.demand_time" type="date" value-format="YYYY-MM-DD" class="w-full"
                placeholder="需求日期" />
            </el-form-item>
          </template>
        </div>
      </template>
      <template #warehouse_header>
        <span class="text-red-600" v-if="!isLook && form.basic.demand_type === 1">*</span> 目的仓
        <div><span v-if="!isLook" class="text-red-600">*</span> 预计运输方式</div>
      </template>
      <template #warehouse_default="{ row, rowIndex }">
        <div class="flex flex-col gap-1 p-1">
          <template v-if="isLook">
            <VText :value="row.destination_warehouse_name" />
            <VText :value="row.transport_type_name" />
          </template>
          <template v-else>
            <el-form-item :prop="['sku', rowIndex, 'destination_warehouse']" label=""
              :rules="[{ required: form.basic.demand_type === 1, message: '不能为空', trigger: 'change' }]">
              <VSelect v-model="row.destination_warehouse" placeholder="目的仓"
                :options="row.country === 'US' ? options.destination_warehouse : options.plan_destination_warehouse"
               filterable clearable class="w-full" />
            </el-form-item>
            <el-form-item :prop="['sku', rowIndex, 'transport_type']" label=""
              :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
              <VSelect v-model="row.transport_type" placeholder="预计运输方式" :options="options.transport_type" select
                filterable clearable class="w-full" />
            </el-form-item>
          </template>
        </div>
      </template>
      <template #combination_default="{ row, rowIndex }">
        <VText :value="row.is_combination_name" />
        <VText v-if="row.combination_data && row.combination_data.length" title="子sku信息" title-position="top" line="2">
          <VMore :key="rowIndex">
            <template #default>
              <template v-for="(d, i) in row.combination_data" :key="i">
                <VText :value="`${d.sku}*${d.sku_num}`" />
              </template>
            </template>
          </VMore>
        </VText>
      </template>
      <template #department_header>
        <div><span v-if="!isLook" class="text-red-600">*</span> 负责销售/<span v-if="!isLook" class="text-red-600">*</span>
          需求数量/部门</div>
      </template>
      <template #department_default="{ row, rowIndex }">
        <SimpleTable v-if="isLook" :key="rowIndex"
          :columns="[{ title: '销售', field: 'sale_name', span: 2 }, { title: '数量', field: 'demand_num' }, { title: '部门', field: 'department_name', span: 3 }]"
          :data="row.detail" :line="2" />
        <el-scrollbar v-else :height="100" :class="{ 'mt-8': row.detail.length === 1 }">
          <div v-for="(da, idx) in row.detail" :key="idx" class="grid gap-1 p-1 mb-3"
            style="grid-template-columns: repeat(9, minmax(0, 1fr))">
            <el-form-item :prop="['sku', rowIndex, 'detail', idx, 'sale_id']" label=""
              :rules="[{ required: true, message: '不能为空', trigger: 'change' }]" class="m-0 col-span-3">
              <VCascader v-model="da.sale_id" placeholder="请选择" filterable clearable class="w-full"
                @change="val => saleChange(da, val)" />
            </el-form-item>
            <el-form-item :prop="['sku', rowIndex, 'detail', idx, 'demand_num']" label=""
              :rules="[{ required: true, message: '不能为空', trigger: 'change' }]" class="m-0 col-span-2">
              <el-input-number v-model="da.demand_num" :controls="false" :min="0" :step="1" :precision="0"
                placeholder="需求数量" />
            </el-form-item>
            <el-input :value="da.department_name" placeholder="部门" disabled class="col-span-3" />
            <el-button v-if="idx" link type="primary" @click="row.detail.splice(idx, 1)">移除</el-button>
            <el-button v-else link type="primary"
              @click="row.detail.push({ sale_id: '', department_id: '' })">添加</el-button>
          </div>
        </el-scrollbar>
      </template>
      <template #plan_no_default="{ row }">
        <VMore>
          <template #default="line">
            <div class="w-full" v-for="(d, i) in row.plan" :key="i">
              <VText :value="d.plan_no || row.sku" :line="line" />
              <VText title="下单数量" :value="d.demand_num" :line="line" />
            </div>
          </template>
        </VMore>
        <el-link v-if="!isLook && form.basic.pd_id && row.plan && row.plan.length" type="primary"
          @click="() => editNumRef.open(row)">修改</el-link>
      </template>
      <template #purchase_default="{ row }">
        <template v-if="row.purchase && row.purchase.length">
          <VMore>
            <template #default="line">
              <div class="w-full" v-for="(d, i) in row.purchase" :key="i">
                <VText title="采购单" :value="d.purchase_no" :line="line" />
                <VText title="下单数" :value="d.purchase_num" :line="line" />
                <VText title="采购单状态" :value="d.audit_status_name" :line="line" />
              </div>
            </template>
          </VMore>
          <VText title='是否到货异常' :value="row.abnormal_flag" :type="row.abnormal_flag === '是' ? 'button' : ''"
            @click="handleRow('view', row)" />
        </template>
        <strong v-else>{{ row.sku_purchase_status_name || 'sku_purchase_status_name 数据不存在' }}</strong>
      </template>
      <template #pause_user_header>
        采购暂停人员<br>
        采购暂停原因
      </template>
      <template #pause_user_default="{ row }">
        <VMore>
          <template #default="line">
            <div class="w-full" v-for="(d, i) in row.pause_data" :key="i">
              <VText :value="d.pause_user" :line="line" />
              <VText title="原因" :value="d.pause_reason" :line="line" />
            </div>
          </template>
        </VMore>
      </template>
      <template #reject_user_header>
        采购驳回人员<br>
        采购驳回原因<br>
      </template>
      <template #reject_user_default="{ row }">
        <VMore>
          <template #default="line">
            <div class="w-full" v-for="(d, i) in row.reject_data" :key="i">
              <VText :value="d.reject_user" :line="line" />
              <VText title="原因" :value="d.reject_reason" :line="line" />
            </div>
          </template>
        </VMore>
      </template>
      <template #deliver_no_default="{ row }">
        <VMore>
          <template #default="line">
            <div class="w-full" v-for="(d, i) in row.deliver_data" :key="i">
              <VText :value="d.deliver_no" :line="line" />
              <VText title="数量" :value="d.deliver_num" :line="line" />
            </div>
          </template>
        </VMore>
      </template>
      <template #remark_default="{ row }">
        <template v-if="isLook">
          <VText :value="row.detail_remark" line="4" />
        </template>

        <template v-else>
          <el-input v-model="row.detail_remark" placeholder="备注" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
            :maxlength="300" />
        </template>
      </template>
      <template #handle_default="{ row, rowIndex }">
        <div v-if="isLook" class="nm">
          <template v-if="form.basic.demand_status !== 11">
            <!-- <el-link :underline="false" type="primary"
                    @click="handleRow('skuComplete', row, rowIndex)">手动完结</el-link> -->
            <template v-if="form.basic.demand_status === 9">
              <el-link :underline="false" type="primary" @click="handleRow('change', row, rowIndex)">变更</el-link><br />
              <el-link :underline="false" type="primary"
                @click="handleRow('skuCancel', row, rowIndex)">取消订单</el-link><br />
            </template>
            <el-link v-if="row.purchase.length" :underline="false" type="primary"
              @click="handleRow('adjust', row, rowIndex)">调整采购主体</el-link>
          </template>
        </div>
        <template v-else>
          <el-button link type="primary" @click="form.sku.splice(rowIndex, 1)">移除</el-button>
        </template>
      </template>
      <template #toolbar_btns>
        <div class="v-title">产品信息</div>
        <div :class="form.basic.demand_status === 9 ? 'ml-[75px]' : 'ml-[35px]'"><VText title='SKU数' :value="[...new Set(skus)].length" /></div>；
        <div><VText title='SKU总数' :value="skus.length" /></div>
      </template>
    </VTable>
  </div>
  <div v-else>
    <div class="v-title my-2">产品信息</div>
    <div class="mb-3">
      <el-button type="primary" @click="() => goodsRef.open()"><i class="dk-iconfont icon-Plus" />添加sku</el-button>
      <el-button type="primary" @click="() => batchSkuRef.open()"><i class="dk-iconfont icon-Plus" />批量添加SKU</el-button>
      <el-button @click="batchRemove">批量删除</el-button>
    </div>
    <vxe-table ref="tableRef" :data="form.sku" :max-height="479" show-overflow :rowConfig="{ height: 154 }"
      :scroll-y="{ enabled: true, gt: 10 }" size="small">
      <vxe-column type="checkbox" :width="40" fixed="left"></vxe-column>
      <vxe-column title="图片" :min-width="100">

        <template #default="{ row }">
          <VImage :src="row.main_img" size="80px"></VImage>
        </template>
      </vxe-column>
      <vxe-column :min-width="180">

        <template #header>
          sku信息
        </template>

        <template #default="{ row }">
          <VText title="需求ID" :value="row.sku_no" />
          <VText title="sku" :value="row.sku">
            {{ row.sku }}
            <el-tag v-if="row.is_new === 2" type="success" effect="dark" class='mx-1'>新</el-tag>
            <el-tag v-if="row.is_special_purchase === 2" type="danger" effect="dark">特</el-tag>
          </VText>
          <VText title="自定义sku" :value="row.sku" />
          <VText title="产品状态" :value="row.sku_status_name" />
          <VText title='是否退税' :value="row.is_refund_tax_name" />
        </template>
      </vxe-column>
      <vxe-column title="产品等级" field="sku_product_level_name" :min-width="80" />
      <vxe-column title="产品名称" field="sku_cn_title" :min-width="180">

        <template #default="{ row }">
          <VText :value="row.sku_cn_title" :line="3" />
        </template>
      </vxe-column>
      <vxe-column title="平台" field="platform" :min-width="180">

        <template #default="{ row }">
          <VSelect v-model="row.platform" :options="options.platform" select placeholder="平台" class="w-full" />
        </template>
      </vxe-column>
      <vxe-column :min-width="isLook ? 150 : 180">

        <template #header>
          <div><span v-if="!isLook" class="text-red-600">*</span> 总需求数量 ({{ total.total_demand_num }})</div>
          <div>总金额 ({{ total.total_demand_amount }})</div>
          采购未税价
        </template>

        <template #default="{ row, rowIndex }">
          <div class="flex flex-col gap-1 p-1">
            <template v-if="isLook">
              <VText :value="row.demand_num" />
            </template>

            <template v-else>
              <el-form-item :prop="['sku', rowIndex, 'demand_num']" label=""
                :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
                <el-input-number v-model="row.demand_num" controls-position="right" placeholder="总需求数量" :min="0"
                  :step="1" :precision="0" class="w-full"
                  @change="val => row.demand_amount = XEUtils.toFixed(row.purchase_price * (val || 0), 2)" />
              </el-form-item>
            </template>
            <VText :value="`${row.demand_amount} (CNY)`" />
            <VText :value="row.purchase_price" />
          </div>
        </template>
      </vxe-column>
      <vxe-column :min-width="isLook ? 120 : 180">

        <template #header>
          <div v-if="form.basic.demand_type === 2">ASIN</div>
          <span v-if="!isLook" class="text-red-600">*</span> 国家
          <div><span v-if="!isLook" class="text-red-600">*</span> 需求日期</div>
        </template>

        <template #default="{ row, rowIndex }">
          <div class="flex flex-col gap-1 p-1">
            <template v-if="isLook">
              <VText v-if="form.basic.demand_type === 2" :value="row.asin" />
              <VText :value="row.country_name" />
              <VText :value="row.demand_time" />
            </template>

            <template v-else>
              <el-form-item v-if="form.basic.demand_type === 2" class="mb-1">
                <el-input v-model="row.asin" placeholder="ASIN" class="w-full" />
              </el-form-item>
              <el-form-item :prop="['sku', rowIndex, 'country']" label=""
                :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
                <VSelect v-model="row.country" placeholder="国家" :options="options.country" select filterable clearable
                  class="w-full" @change="row.destination_warehouse = ''" />
              </el-form-item>
              <el-form-item :prop="['sku', rowIndex, 'demand_time']" label=""
                :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
                <el-date-picker v-model="row.demand_time" type="date" value-format="YYYY-MM-DD" class="w-full"
                  placeholder="需求日期" />
              </el-form-item>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="估算日销量" field="estimate_day_sale_num" width="70"></vxe-column>
      <vxe-column :min-width="180">
        <template #header>
          <span class="text-red-600" v-if="!isLook && form.basic.demand_type === 1">*</span> 目的仓
          <div><span v-if="!isLook" class="text-red-600">*</span> 预计运输方式</div>
        </template>

        <template #default="{ row, rowIndex }">
          <div class="flex flex-col gap-1 p-1">
            <template v-if="isLook">
              <VText :value="row.destination_warehouse_name" />
              <VText :value="row.transport_type_name" />
            </template>

            <template v-else>
              <el-form-item :prop="['sku', rowIndex, 'destination_warehouse']" label=""
                :rules="[{ required: form.basic.demand_type === 1, message: '不能为空', trigger: 'change' }]">
                <VSelect v-model="row.destination_warehouse" placeholder="目的仓"
                  :options="row.country === 'US' ? options.destination_warehouse : options.plan_destination_warehouse"
                 filterable clearable class="w-full" />
              </el-form-item>
              <el-form-item :prop="['sku', rowIndex, 'transport_type']" label=""
                :rules="[{ required: true, message: '不能为空', trigger: 'change' }]">
                <VSelect v-model="row.transport_type" placeholder="预计运输方式" :options="options.transport_type" select
                  filterable clearable class="w-full" />
              </el-form-item>
            </template>
          </div>
        </template>
      </vxe-column>
      <vxe-column :min-width="100">
        <template #header>
          组合sku
        </template>
        <template #default="{ row, rowIndex }">
          <VText :value="row.is_combination_name" />
          <VText v-if="row.combination_data && row.combination_data.length" title="子sku信息" title-position="top"
            line="2">
            <VMore :key="rowIndex">
              <template #default>
                <template v-for="(d, i) in row.combination_data" :key="i">
                  <VText :value="`${d.sku}*${d.sku_num}`" />
                </template>
              </template>
            </VMore>
          </VText>
        </template>
      </vxe-column>
      <vxe-column :min-width="400">

        <template #header>
          <div><span v-if="!isLook" class="text-red-600">*</span> 负责销售/<span v-if="!isLook"
              class="text-red-600">*</span> 需求数量/部门</div>
        </template>

        <template #default="{ row, rowIndex }">
          <SimpleTable v-if="isLook" :key="rowIndex"
            :columns="[{ title: '销售', field: 'sale_name', span: 2 }, { title: '数量', field: 'demand_num' }, { title: '部门', field: 'department_name', span: 3 }]"
            :data="row.detail" :line="2" />
          <el-scrollbar v-else :height="130" :class="{ 'mt-12': row.detail.length === 1 }">
            <div v-for="(da, idx) in row.detail" :key="idx" class="grid gap-1 p-1 mb-3"
              style="grid-template-columns: repeat(9, minmax(0, 1fr))">
              <el-form-item :prop="['sku', rowIndex, 'detail', idx, 'sale_id']" label=""
                :rules="[{ required: true, message: '不能为空', trigger: 'change' }]" class="m-0 col-span-3">
                <VCascader v-model="da.sale_id" placeholder="请选择" filterable clearable class="w-full"
                  @change="val => saleChange(da, val)" />
              </el-form-item>
              <el-form-item :prop="['sku', rowIndex, 'detail', idx, 'demand_num']" label=""
                :rules="[{ required: true, message: '不能为空', trigger: 'change' }]" class="m-0 col-span-2">
                <el-input-number v-model="da.demand_num" :controls="false" :min="0" :step="1" :precision="0"
                  placeholder="需求数量" />
              </el-form-item>
              <el-input :value="da.department_name" placeholder="部门" disabled class="col-span-3" />
              <el-button v-if="idx" link type="primary" @click="row.detail.splice(idx, 1)">移除</el-button>
              <el-button v-else link type="primary"
                @click="row.detail.push({ sale_id: '', department_id: '' })">添加</el-button>
            </div>
          </el-scrollbar>
        </template>
      </vxe-column>
      <vxe-column title="产品分类" :min-width="120">

        <template #default="{ row }">
          <VText :value="row.attribute_name" line="3" />
        </template>
      </vxe-column>
      <vxe-column field="is_invoice" :min-width="160">

        <template #header>
          供应商信息
        </template>

        <template #default="{ row }">
          <VText :value="row.supplier_code" />
          <VText title="是否开票" :value="row.is_invoice_name" />
          <VText title="地址" :value="row.supplier_address" :line="2" />
        </template>
      </vxe-column>
      <vxe-column :min-width="120">

        <template #header>
          采购
          <div>开发</div>
        </template>

        <template #default="{ row }">
          <VText :value="row.purchaser_name" />
          <VText :value="row.developer_name" />
        </template>
      </vxe-column>
      <vxe-column :min-width="180">

        <template #header>
          备料计划数据
        </template>

        <template #default="{ row }">
          <VMore>
            <template #default="line">
              <div class="w-full" v-for="(d, i) in row.plan" :key="i">
                <VText :value="d.plan_no || row.sku" :line="line" />
                <VText title="下单数量" :value="d.demand_num" :line="line" />
              </div>
            </template>
          </VMore>
          <el-button v-if="!isLook" link type="primary"
            @click="() => editNumRef.open(Object.assign(row, {demand_type: form.basic.demand_type, sale_id: row.detail.map(d => d.sale_id)}))">{{row.plan && row.plan.length ? '修改' : '添加'}}</el-button>
        </template>
      </vxe-column>

      <template v-if="isLook">
        <vxe-column :min-width="200">
          <template #header>
            采购信息
          </template>

          <template #default="{ row }">
            <template v-if="row.purchase && row.purchase.length">
              <VMore>
                <template #default="line">
                  <div class="w-full" v-for="(d, i) in row.purchase" :key="i">
                    <VText title="采购单" :value="d.purchase_no" :line="line" />
                    <VText title="下单数" :value="d.inbound_num" :line="line" />
                    <VText title="采购单状态" :value="d.audit_status_name" :line="line" />
                  </div>
                </template>
              </VMore>
              <VText title='是否到货异常' :value="row.abnormal_flag" :type="row.abnormal_flag === '是' ? 'button' : ''"
                @click="handleRow('view', row)" />
            </template>
            <strong v-else>{{ row.sku_purchase_status_name || 'sku_purchase_status_name 数据不存在' }}</strong>
          </template>
        </vxe-column>
        <vxe-column :min-width="140">

          <template #header>
            采购暂停人员<br>
            采购暂停原因<br>
          </template>

          <template #default="{ row }">
            <VMore>
              <template #default="line">
                <div class="w-full" v-for="(d, i) in row.pause_data" :key="i">
                  <VText :value="d.pause_user" :line="line" />
                  <VText title="原因" :value="d.pause_reason" :line="line" />
                </div>
              </template>
            </VMore>
          </template>
        </vxe-column>
        <vxe-column :min-width="140">

          <template #header>
            采购驳回人员<br>
            采购驳回原因<br>
          </template>

          <template #default="{ row }">
            <VMore>
              <template #default="line">
                <div class="w-full" v-for="(d, i) in row.reject_data" :key="i">
                  <VText :value="d.reject_user" :line="line" />
                  <VText title="原因" :value="d.reject_reason" :line="line" />
                </div>
              </template>
            </VMore>
          </template>
        </vxe-column>
        <vxe-column :min-width="160">

          <template #header>
            头程发货信息<br>
          </template>

          <template #default="{ row }">
            <VMore>
              <template #default="line">
                <div class="w-full" v-for="(d, i) in row.deliver_data" :key="i">
                  <VText :value="d.deliver_no" :line="line" />
                  <VText title="数量" :value="d.deliver_num" :line="line" />
                </div>
              </template>
            </VMore>
          </template>
        </vxe-column>
      </template>
      <vxe-column title="备注" min-width="120">

        <template #default="{ row }">
          <template v-if="isLook">
            <VText :value="row.detail_remark" line="4" />
          </template>

          <template v-else>
            <el-input v-model="row.detail_remark" placeholder="备注" type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }" :maxlength="300" />
          </template>
        </template>
      </vxe-column>
      <vxe-column title="操作" fixed="right" :width="110">

        <template #default="{ row, rowIndex }">
          <div v-if="isLook" class="nm">
            <template v-if="form.basic.demand_status !== 11">
              <!-- <el-link :underline="false" type="primary"
                      @click="handleRow('skuComplete', row, rowIndex)">手动完结</el-link> -->
              <template v-if="form.basic.demand_status === 9">
                <el-link :underline="false" type="primary"
                  @click="handleRow('change', row, rowIndex)">变更</el-link><br />
                <el-link :underline="false" type="primary"
                  @click="handleRow('skuCancel', row, rowIndex)">取消订单</el-link><br />
              </template>
              <el-link v-if="row.purchase.length" :underline="false" type="primary"
                @click="handleRow('adjust', row, rowIndex)">调整采购主体</el-link>
            </template>
          </div>

          <template v-else>
            <el-button link type="primary" @click="form.sku.splice(rowIndex, 1)">移除</el-button>
          </template>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
  <EditNum ref="editNumRef" />
  <BatchSku ref="batchSkuRef" @change="goodsChange" />
  <aChange ref="changeRef" :options="options" :form="form" />
  <ChangeDialog ref="changeDialogRef" :options="options" />
  <Cancel ref="cancelRef" :options="options" />
  <aGoods ref="goodsRef" @change="goodsChange" />
</template>